import defaultImg from '@/components/defaultImg/defaultImg' //默认图片组件
import carBeauty from '@/components/card/carbeauty-list-item.vue'
import carGoodsFilter from '@/components/down-filters/car-goods-filter.vue'  // 筛选下拉菜单组件

export default {
  components: {
    defaultImg, //默认图片组件
    carBeauty,
    carGoodsFilter
  },
  data() {
    return {
      //车品列表
      goodsList: [],
      // 车品列表查询/筛选条件
      listParams: {
        sortId: 0,  //排序id
        categoryId: '',  //分类id
        keyword: '',
        pageIndex: 1,
        pageSize: 10
      },

      // 分类列表
      categoryList: [],

      loadingStatus: ['loadmore', 'loading', 'nomore'],  // 加载更多的各个状态
      loadingStatusIndex: 1,  // 加载状态

      fixedFlag: false, // 筛选组件吸顶时为true
    }
  },

  computed: {
    lat(){
      return this.$store.state.latitude
    },
    lon(){
      return this.$store.state.longitude
    },
  },

  onLoad() {

  },
  created(){
    uni.showLoading()
    this.getCarGoodsList()
    this.getCategoryList()
  },

  // 上拉滚动触底了
  onReachBottom() {
    this.getCarGoodsList()
  },

  methods: {
    //发布精品货源 商品管理  我的订单
    fabuxcclick(type) {
      let navs = new Map([
        [0, '/pages_carGoods/selectTheCategory/selectTheCategory'],
        [1, '/pages_carGoods/carGoodsManage/carGoodsManage'],
        [2, '/pages_order/carGoodsOrder/orderManage/orderManage']
      ])
      uni.navigateTo({
        url: navs.get(type)
      })
    },

    // 获取车品列表
    async getCarGoodsList() {
      this.loadingStatusIndex = 1
		  try {
		    let data = {
          'pageIndex': this.listParams.pageIndex,
          'pageSize': this.listParams.pageSize,
          'content': this.listParams.keyword,
          'type_Id': this.listParams.categoryId,
          'sorting': this.listParams.sortId,
          lat: this.lat ? parseFloat(this.lat) : 104.063364, //经度
          lon: this.lon ? parseFloat(this.lon) : 30.566, //纬度
        }
		    const res = await this.$api.carGoods.GetGoodsCarSupplieListPaged(data)
        console.log(res.data, '车品')
        // 如果数组数据为空[]，且当前页为第一页时，将列表清空
        if (res.data.list.length === 0 && this.listParams.pageIndex === 1) {
          this.goodsList = res.data.list
          this.loadingStatusIndex = 2
        } else {
          let list = [...this.goodsList, ...res.data.list]
          this.goodsList = list
          this.loadingStatusIndex = res.data.list.length === 0 ? 2 : 0 // 修改加载更多状态
          this.listParams.pageIndex += 1 // 当前页+1
        }
		  } catch (e) {
        //
        this.loadingStatusIndex = 2
		  }
      uni.hideLoading()
    },

    // 获取分类列表
    async getCategoryList() {
      try {
        let data = {
          'pageIndex': 1,
          'pageSize': 100,
        }
        const res = await this.$api.carGoods.GetGoodsCarSupplieTypeListPaged(data)
        console.log(res.data, '车品分类列表')
        this.categoryList = res.data.list.map(item => ({ label: item.name, value: item.id }))
      } catch (e) {
        //
      }
    },

    // 下拉筛选选中条件触发的事件
    filterChange({ type, id }) {
      // type: 0是分类，1是排序
      switch(type) {
      case 0:
        this.listParams.categoryId = id
        break
      case 1:
        this.listParams.sortId = id
        break
      }

      this.goodsList = []
      this.listParams.pageIndex = 1
      this.getCarGoodsList()
    },

    // 搜索框关键字搜索
    search() {
      console.log('搜索关键字')
      this.goodsList = []
      this.listParams.pageIndex = 1
      this.getCarGoodsList()
    },

    // 点击加载更多
    loadmoreClick() {
      this.getCarGoodsList()
    },

    // 筛选下拉打开时触发
    filterOpen() {
      if (this.fixedFlag) return false
      uni.pageScrollTo({
        scrollTop: 120,
        duration: 100
      })
    }
  },
}
